<!-- <template>
<div>ceshi </div>
</template> -->

<script>

export default {
  name: 'iitd',

  props: {
    dataList: { type: Object },
    dataKey: { type: String },
    type: { type: String },
    status: { type: [String, Number] },
    showFileEvent: { type: Function },
    rowNum:{ type: [String, Number] },
  },
  data() {
    return {
      dataArr: []
    }
  },
  watch: {
    dataList: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          if (val.dataList) {
            // this.dataArr = val.children
            const tempStateList = {
              未上传凭证: '上传文件',
              已上传凭证: '查看凭证',
              已提交: '查看凭证',
              已审批: '审核通过',
            }
            const tempType = {
              1: (tempArr) => { return '' },
              2: (tempArr) => { return '合计' },
              3: (tempArr) => {
                const sum = eval(tempArr.join('+'))
                return sum
              },
              4: (tempArr) => { return '' },
            }
            const tempArr = []
            val.dataList.forEach(item => {
              if (this.type == 4) {
                // && this.status == 10
                if (this.status == 5) {
                  tempArr.push(tempStateList[item['state']] + '|删除')
                } else {
                  tempArr.push(tempStateList[item['state']])

                }
              } else if (this.type == 3) {
                tempArr.push(isNaN(item[this.dataKey]) ? 0 : item[this.dataKey])
              } else {
                tempArr.push(item[this.dataKey])

              }
            });

            this.dataArr = [...tempArr, tempType[this.type](tempArr)]
          }
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getItemHtml(item, index, dataSize) {
      const isShowBorder = index == dataSize - 1 ? false : true
      const tempClass = ['data-cell-item', isShowBorder === true ? 'boder' : '  '].join(' ')
      // return (
      //   this.type==4 ? (
      //     this.status == 10? <span>
      //       <a-button type="link" class={tempClass} onClick={()=>{this.showFile(isShowBorder,index)}}>{item}</a-button>
      //       {/* <a-button type="link" class={tempClass} onClick={()=>{this.showFile(isShowBorder,index)}}>删除</a-button> */}
      //       </span> : <a-button type="link" class={tempClass} onClick={()=>{this.showFile(isShowBorder,index)}}>{item}</a-button>
      //   )
      //   : (<div class={tempClass} >{item}</div>)
      // )
      // console.log('@@@@@@@@@@@',item,index,dataSize,this.dataArr)
      if (this.type == 4) {
        if (item.indexOf('|') >= 0) {
          return <div class={tempClass}>{
            item.split('|').map(itemName => {
              return <a-button type="link" onClick={() => { this.showFile(isShowBorder, index, itemName) }}>{itemName}</a-button>
            })
          }</div>
        }
        return <a-button type="link" class={tempClass} onClick={() => { this.showFile(isShowBorder, index, item) }}>{item}</a-button>
      }

      return (<div class={tempClass} >{item}</div>)

      // return (<div class={tempClass} onClick={()=>{this.showFile(isShowBorder,index)}}>{item}</div>)
      // return ( <a-button type="link" class={tempClass} onClick={()=>{this.showFile(isShowBorder,index)}}>{item}</a-button>)
    },
    showFile(isShowBorder, index,btnName) {
      console.log('showFile==>',isShowBorder, this.type , index,btnName);
      if(btnName=='删除'){
        this.showFileEvent && this.showFileEvent(this.dataList, index,btnName,this.rowNum)
      }else{
        if (this.type == 4 && isShowBorder ) {
          this.showFileEvent && this.showFileEvent(this.dataList, index,btnName,this.rowNum)
        }
      }
    }
  },
  render() {
    return <div class='data-cell-list'>
      {
        this.dataArr.map((item, index) => {
          return this.getItemHtml(item, index, this.dataArr.length)
        })
      }
    </div>
  }
}
</script>

<style lang="less">
.data-cell-list {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;

  .data-cell-item {
    width: 100%;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.boder {
      border-bottom: 1px solid #e8e8e8;
    }
  }
}
</style>
